<template>
  <div class="priority">
    <span class="state_icon_color" :class="stateColor">{{data.storeTypeLabel}}</span>
  </div>
</template>

<script>
export default {
  name: 'StorageType',
  props: {
    data: Object
  },
  computed: {
    // 根据优先级返回相应class
    stateColor() {
      switch (this.data.storeTypeValue) {
        case 'Entity':
          return 'storag_type_1'
        case 'Virtual':
          return 'storag_type_2'
      }
    }
  }
}
</script>

<style scoped lang="less">
  // 实物入库
  @storageType1: #00b4ff;
  // 虚拟入库
  @storageType2: #7e8e9f;

  .priority {
    .state_icon_color {
      // 实物入库
      &.storag_type_1:before {
        background-color: @storageType1;
      }

      // 虚拟入库
      &.storag_type_2:before {
        background-color: @storageType2;
      }
    }

    .state_icon_color:before {
      background-color: transparent;
    }
  }
</style>
